Toast updates - #16

Add app-wide toast queue infrastructure (DisplayToastProvider + useToastQueue)

Summary

• useToastQueue composable — module-level singleton reactive queue (no Pinia). show() returns an ID, dismiss(id) removes a specific toast, clear() flushes all. Uses crypto.randomUUID() with a toast- prefix for guaranteed unique IDs. The queue is exposed as readonly to consumers.

• DisplayToastProvider component — placed once in the app layout. Consumes the queue and renders visible entries via Teleport to="body" + TransitionGroup. Supports position, alignment, fullWidth, and maxVisible props. Promotes pending entries to visible up to maxVisible, starts per-entry auto-dismiss timers, and handles Escape-key and close-button dismissal.

• Queue-driven stacking — toasts queue as pending and are promoted sequentially as visible slots open. When a visible toast is dismissed, the next pending entry enters immediately.

• FLIP animation for stack dismissal — @before-leave pins each departing toast's top/width before it becomes position: absolute, removing it from flex flow so remaining toasts FLIP-animate (via v-move) into their new positions smoothly rather than snapping. min-width is pinned on the container during each leave and released in @after-leave to prevent the right-anchored width: max-content container from collapsing and causing horizontal jitter.

• Enter animation fix — DisplayToastProvider now uses explicit showTop/showBottom keyframes (with from states) instead of relying on v-enter-from being captured by the animation engine, ensuring the slide-in is always visible.

• Updated demo page (pages/ui/display-toast.vue) — simplified to two trigger buttons ("Trigger Toast", "Queue Multiple") with a dev-only QA panel for all position/alignment/theme/auto-dismiss/maxVisible controls.

• New Storybook stories (DisplayToastProvider.stories.ts) — Default, BottomLeft, Stacked (maxVisible: 3), FullWidth stories with grouped arg controls for provider and toast config.

• 35 tests covering mount, empty state, show/promote, content rendering, data-theme, ARIA roles/live/describedby, tabindex, position/alignment/fullWidth classes, maxVisible gating, close-button dismiss, Escape-key dismiss, auto-dismiss timer, no-auto-dismiss, queue progression, progress bar, and clear().

• Skills updated — display-toast.md expanded to document both the standalone DisplayToast pattern and the new queue-based pattern side-by-side.

Test plan

• Trigger a single toast — verify slide-in animation (top and bottom positions)
• Queue multiple toasts with maxVisible=1 — verify sequential promotion on dismiss
• Queue multiple with maxVisible=3 — verify up to 3 visible, remaining in queue
• Dismiss a toast mid-stack — verify remaining toasts FLIP smoothly with no horizontal jitter
• Dismiss to promote next in queue — verify new toast enters cleanly (no right-edge flash)
• Verify auto-dismiss timer and progress bar
• Verify Escape key dismisses focused toast
• npm run test:run — all 35 tests pass